<template>
<div id="app" class="adOwner">
      <!--广告主筛选-->
  <div class="search">
    <div class="selectOption">
              <el-input v-model="operationName" placeholder="请输入管理员昵称"></el-input>
              <el-date-picker v-model="operationTime" type="datetime" placeholder="输入操作时间" :editable='false' clearable></el-date-picker>
              <el-button type="primary"  @click='operationSearch' class='checkBtn'>检索</el-button>
    </div>
  </div>  
    <!--广告主列表-->
    <div class="contain_two" style="min-width: 675px;">
      <table class="table table-bordered" style="border-radius: 10px!important;">
        <thead>
          <tr style="height: 40px">
            <th class=""><span>管理员昵称</span></th>

            <th>
              <div class="">
                <span>操作时间</span>
              </div>
            </th>

            <th><span>操作事项</span></th>
          </tr>
        </thead>
        <tbody id="staff_info" class="">
          <tr class="contLi" v-for="(list,index) in tableData">
            <td class="" style="min-width: 50px;width: 20%;"><span class=" ">{{list.userName}}</span></td>
            <td class="" style="min-width: 100px;width: 20%;text-align: center;"><span class=" ">{{list.createDate}}</span></td>
            <td @click='openMsg(index)' class="" style="max-width: 800px;width: 60%;text-align: left;padding-left:10px!important;cursor: pointer;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"><span class=" " >{{list.behavior}}</span></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="block pagination" v-show='nullContentPagination'>
        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="10" layout="prev, pager, next, jumper"
          :total="total">
          </el-pagination>
      </div>
  <div class="nullContent" v-show='nullContent'>暂无数据</div>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
// 导入地址数据
import addressData from '../../assets/js/addressData.js'
// 加载地址数据
function formatData(data) {
  return data
}
export default {
  name: 'adOwner',
  data() {
    return {
      nullContent: false,
       nullContentPagination: true,
      logoImg:'../../../static/img/icon_xinjian_picture@2x.png',
      quaImg:'../../../static/img/icon_xinjian_picture@2x.png',
      advers:'',
      advTitle:'',
      total:0,
      currentPage: 1,
      selected: '请选择',
      selecteds: '请选择',
      aaaa: '请选择',
      aaaas: '请选择',
      YXs: [
        {
          value: '请选择',
        }
      ],
      YXss: [
        {
          value: '请选择',
        }
      ],
      selectedOptions: [],
      selectedOptionss: [],
      tableData: [],
      addressData: formatData(addressData),
      operationName: '',
      operationTime: '',
      showIf:false,
      lists: [],
      advertiserName:'',
      telephone:'',
      imageUrl:'',
      islogoImg:''
    }
  },
  created: function () {
    // 获取广告主列表
    this.getOpretion(1)
  },
  methods: {
    // 打开信息内容
    openMsg(i) {
        let msg = this.tableData[i].behavior;
        this.$alert(msg, '信息内容', {
            confirmButtonText: '确定',
        });
    },
     // 请求格式化日期
    UnFormatDate(date) {
        return  new  Date(date).toLocaleString().split(' ')[0].replace(/\//g,'-');
      },
    operationSearch(){
      let token = sessionStorage.token;
      var jsonFilter = {
        pageSize: 10,
        pageNo:this.currentPage,
        token:token,
      };
      if (this.operationName != "" && this.operationName != null) {
        jsonFilter.userName = this.operationName;//用户尼称
       }
       if (this.operationTime != "" && this.operationTime != null) {
        jsonFilter.beginDate = this.UnFormatDate(this.operationTime) + " 00:00:00";//广告创建开始时间
        jsonFilter.endDate = this.UnFormatDate(this.operationTime) + " 23:59:59";//广告创建结束时间
      }
      this.getOpretionList(jsonFilter).then((data)=>{
        console.log(data)
        if(data.code == 200){
         this.total = data.data.count;
          for(let i=0;i<data.data.list.length;i++){
                data.data.list[i].userName = data.data.list[i].userName ;
                data.data.list[i].createDate = this.formatDate(data.data.list[i].createDate);
                data.data.list[i].behavior = data.data.list[i].behavior ;
        }
          this.tableData = data.data.list
        }else{
          this.$message(data.message)
        }

      }).catch(msg => console.log(msg))
    },
    // 分页跳转
    handleCurrentChange(val) {
        this.currentPage = val;
        this.getOpretion(val);
    },
    // 格式化日期
    formatDate(date){
          return new Date(parseInt(date)).toLocaleString().replace(/年|月|日/g, "")
    },
    getOpretion(i){
      this.$store.commit('showLoading');
       let token = sessionStorage.token;
      var jsonFilter = {
        pageSize: 10,
        pageNo:i,
        token:token,
      };
      if (this.operationName != "" && this.operationName != null) {
        jsonFilter.userName = this.operationName;//用户尼称
       }
       if (this.operationTime != "" && this.operationTime != null) {
        jsonFilter.beginDate = this.UnFormatDate(this.operationTime) + " 00:00:00";//广告创建开始时间
        jsonFilter.endDate = this.UnFormatDate(this.operationTime) + " 23:59:59";//广告创建结束时间
      }
     
      this.getOpretionList(jsonFilter).then((data)=>{
        this.$store.commit('hiddenLoading');
        console.log(data)
        if(data.code === 200){
          this.nullContent = false;
          this.nullContentPagination = true;
          if (data.data.list.length == 0) {
              this.nullContent = true;
              this.nullContentPagination = false;
              return;
          }
          this.total = data.data.count;
          for(let i=0;i<data.data.list.length;i++){
                data.data.list[i].userName = data.data.list[i].userName ;
                data.data.list[i].createDate = this.formatDate(data.data.list[i].createDate);
                data.data.list[i].behavior = data.data.list[i].behavior ;
        }
          this.tableData = data.data.list
        }else{
          this.$message(data.message)
        }
      }).catch(msg => console.log(msg));
    },
      ...mapActions(['getOpretionList'])
  }
}

</script>
<style scoped>
thead th:nth-child(1){
  width:18%;
}
  .el-date-editor.el-input {
    width: 158px;
  }
  .advertiser select {
    float: left;
    width: 70px;
    height: 36px;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
  }
  
  .areaselect input {
    float: left;
    width: 200px;
    height: 36px;
  }
  
  .add_reward {
    background: rgb(82, 186, 130);
    border-radius: 5px;
    width: 115px;
    height: 36px;
    border: none;
    margin-left: 45px;
    color: #fff;
  }
  
  th,
  td {
    text-align: center;
  }

  .modal-header {
    border-bottom: none;
    border-radius:10px;
  }
  
  .modal-title {
    padding: 10px 0 20px 0;
    color: rgb(109, 148, 189);
    border-bottom: 1px solid #ccc;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
  }
  
  ::-webkit-input-placeholder {
    color:#bfcbd9;  
}  
    
  .egRatio {
    width: 60px;
    top: 0px;
    position: absolute;
    left: 190px;
    color: #a5a3a3;
  }
  
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
table th{
    padding:0;
    height: 40px;
    line-height: 40px;
}
.table > tbody > tr{
    padding:0;
}

.el-input {
        width: 200px;
    }
  .adOwner{
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
  }
</style>